<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div {
        width: 250px;
        height: 120px;
        border: 1px solid purple;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <button id="btn_reqGet">点击发送get请求</button>
    <button id="btn_reqPost">点击发送post请求</button>
    <div id="div"></div>
  </body>
  <script>
    const div = document.getElementById("div");

    const btnGet = document.getElementById("btn_reqGet");

    //1、创建xmlhttprequest对象
    let xhr = new XMLHttpRequest();
    btnGet.onclick = function () {
      //可以进行超时设置 设置2s  如果超过2s则请求取消（请求状态变为cancel）
      xhr.timeout = 2000;
      //超时回调
      xhr.ontimeout = function () {
        alert("网络异常，请稍后重试~");
      };
      //网络异常回调(测试可通过浏览器->网络签->设置离线进行测试)
      xhr.onerror = function () {
        alert("你的网络出了些问题~");
      };

      //2、初始化，设置请求方法和url 针对ie缓存问题  添加一个时间戳的传参即可  t=Date.now()
      xhr.open("get", "http://127.0.0.1:9000/server?a=1&b=2");
      //3、发送请求
      xhr.send();
      //4、事件绑定 处理服务器返回的结果 readystate 值有0,1,2,3,4
      xhr.onreadystatechange = function () {
        //readystate==4 表示服务器完整的返回数据后
        if (xhr.readyState == 4) {
          //status 为2XX时 表示成功
          if (xhr.status >= 200 && xhr.status < 300) {
            /* xhr.status //状态码
            xhr.statusText //状态描述
            xhr.getAllResponseHeaders()  //所有的响应头
            xhr.response  //响应体 */
            div.innerHTML = xhr.response;
          }
        }
      };
    };

    const btnPost = document.getElementById("btn_reqPost");
    //addEventListener 是dom2的操作
    btnPost.addEventListener("click", function () {
      //2、初始化，设置请求方法和url
      xhr.open("post", "http://127.0.0.1:9000/server");
      //3、设置请求头，也可以自定义请求头
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //请求体类型
      //4、发送请求 请求体形式设置灵活，只要后台可处理
      xhr.send("a=10&b=20");

      //5、事件绑定 处理服务器返回的结果 readystate 值有0,1,2,3,4
      xhr.onreadystatechange = function () {
        //readystate==4 表示服务器完整的返回数据后
        if (xhr.readyState == 4) {
          //status 为2XX时 表示成功
          if (xhr.status >= 200 && xhr.status < 300) {
            /* xhr.status //状态码
            xhr.statusText //状态描述
            xhr.getAllResponseHeaders()  //所有的响应头
            xhr.response  //响应体 */
            //1、手动转化
            let obj = JSON.parse(xhr.response);
            div.innerHTML = obj.name;
            //2、自动转化  需要设置xhr.responseType = "json"; 则 xhr.response 自动转化为对象
          }
        }
      };
    });

    //window.onkeydown=function(){}  //键盘按下事件
    //btnPost.addEventListener("loadend", function () {})  //加载完成方法
    //xhr.abort(); //手动取消请求
    /*    如何解决重复发送请求   
    可以声明一个标识变量 isSending = false 表示没有正在发送的请求
    当第一次发送请求的时候，将isSending 修改为true
    当数据返回成功的时候即readystate===4时，将isSending修改为false即可 */

    /* 参数：1）post传递的请求体数据 可由send()方法携带  2） get传参 可以放到地址后面用问号传递
      传参的第二种方法可以直接向后拼接，同时也可以使用参数对象URLSearchParams
      eg:
      const qObj = {
        pname,
        cname
      }
      // 查询参数对象 -> 查询参数字符串
      const paramsObj = new URLSearchParams(qObj)
      const queryString = paramsObj.toString()  queryString果形式是a=xxx&b=xxx&c=xxx*/
  </script>
</html>
